﻿<div style="background-color: #f5f5f5; width: 300px; height: 500px; background-position: 50% top;">
	<div style="text-align: center;">
		<font face="trebuchet ms, sans-serif" size="2">
		<body onkeydown="keyPressed(event); this.select()" onkeyup="keyReleased(event)" style="margin: 0">

		<form>
			<div style="wdth: 300px; height: 50px;">
			</div>
			<div style="wdth: 300px; height: 75px; vertical-align: bottom;">
				<a href="http://magabot.cc" target="_blank" title="Visit Magabot's website!">
				<img src="http://magabot-control.googlecode.com/hg/static/pictures/img_title.png" />
				</a></div>
			<!-- CONTROLS LAYER -->
			<div id="controlsLayer" style="position: absolute; width: 300px; height: 160px; z-index: 1; left: 0px; top: 125px; background-color: #f5f5f5; visibility: visible;">
				<font face="trebuchet ms, sans-serif" size="2">
				<select id="robotsCombobox" name="D1" onchange="robotsComboboxChanged()" onfocus="this.blur();" size="0">
				<option selected=""></option>
				<option id="robot1" value=" "></option>
				<option id="robot2" value=" "></option>
				</select><br><br />
				<table align="center" border="0" bordercolor="#888" cellspacing="0" style="text-align: center; font-family: 'trebuchet ms', sans-serif; border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 0px; width: 105px; height: 109px; background-image: url(https://magabot-control.googlecode.com/hg/static/pictures/background_05.png) ">
					<tr>
						<td style="width: 30px; height: 30px">&nbsp;</td>
						<td style="width: 30px; height: 30px">
						<img id="forward" alt="Forward" height="30" onclick="setDirection('forward')" src="https://magabot-control.googlecode.com/hg/static/pictures/forward.png" width="30" /></td>
						<td style="width: 30px; height: 30px">&nbsp;</td>
					</tr>
					<tr>
						<td style="width: 30px; height: 30px">
						<img id="left" alt="Left" height="30" onclick="setDirection('left')" src="https://magabot-control.googlecode.com/hg/static/pictures/left.png" width="30" /></td>
						<td style="width: 30px; height: 30px">
						<img id="stop" alt="Stop" height="30" onclick="setDirection('stop')" src="https://magabot-control.googlecode.com/hg/static/pictures/stop.png" width="30" /></td>
						<td style="width: 30px; height: 30px">
						<img id="right" alt="Right" height="30" onclick="setDirection('right')" src="https://magabot-control.googlecode.com/hg/static/pictures/right.png" width="30" /></td>
					</tr>
					<tr>
						<td style="width: 30px; height: 30px">&nbsp;</td>
						<td style="width: 30px; height: 30px">
						<img id="backward" alt="Backward" height="30" onclick="setDirection('backward')" src="https://magabot-control.googlecode.com/hg/static/pictures/backward.png" width="30" />
						</td>
						<td style="width: 30px; height: 30px">&nbsp;</td>
					</tr>
				</table>
				</font></div>
			<!-- UPDATE OPTIONS LAYER -->
			<div id="updateOptionsLayer" style="position: absolute; width: 300px; height: 160px; z-index: -1; left: 0px; top: 125px; background-color: #f5f5f5">
				<font face="trebuchet ms, sans-serif" size="2"><strong>Update the 
				combobox options:<br></strong></font><font size="1">
				<table style="width: 100%">
					<tr>
						<td style="width: 18px">&nbsp;</td>
						<td style="width: 128px">Username</td>
						<td style="width: 128px">Name (optional)</td>
					</tr>
					<tr>
						<td style="width: 18px">1st</td>
						<td style="width: 128px">
						<input id="firstOptionTextbox" style="width: 128px" type="text" /></td>
						<td style="width: 128px">
						<font face="trebuchet ms, sans-serif" size="2">
						<input id="firstOptionNameTextbox" style="width: 128px" type="text" /></font></td>
					</tr>
					<tr>
						<td style="width: 18px">2nd</td>
						<td style="width: 128px">
						<input id="secondOptionTextbox" style="width: 128px" type="text" /></td>
						<td style="width: 128px">
						<font face="trebuchet ms, sans-serif" size="2">
						<input id="secondOptionNameTextbox" style="width: 128px" type="text" /></font></td>
					</tr>
				</table>
				</font><br>
				<input name="doneButton" onclick="doneButtonClicked()" style="height: 24px" type="button" value="Done!" title="Update the combobox options!" /><br />
			</div>
			<!-- SIGN IN LAYER -->
			<div id="signinLayer" style="position: absolute; width: 300px; height: 160px; z-index: -1; left: 0px; top: 125px; background-color: #f5f5f5">
				<font face="trebuchet ms, sans-serif" size="2"><br />
				Google Email <br />
				<input name="signinText" type="text" /> <br />
				Password <br />
				<input name="signinPassword" type="password" /> <br />
				<input name="signinButton" style="height: 24px" type="button" value="Sign in" /><br />
				</font></div>
			<div style="margin-top: 170px; width: 300px;">
				<a href="#" title="Show controls layer" onMouseOver="changeImageSrc('controlsButton', 'http://magabot-control.googlecode.com/hg/static/pictures/controlsMouseOver.png')" onMouseOut="changeImageSrc('controlsButton', 'http://magabot-control.googlecode.com/hg/static/pictures/controls.png')">
				<img id="controlsButton" onclick="changeVisibility('updateOptionsLayer',-1); changeVisibility('signinLayer',-1); changeVisibility('controlsLayer',1);" onMouseOver="changeImageSrc('controlsButton', 'http://magabot-control.googlecode.com/hg/static/pictures/controlsMouseOver.png')" onMouseOut="changeImageSrc('controlsButton', 'http://magabot-control.googlecode.com/hg/static/pictures/controls.png')" src="http://magabot-control.googlecode.com/hg/static/pictures/controls.png" /></a>
				<a href="#" title="Show update combobox options layer" onMouseOver="changeImageSrc('updateOptionsButton', 'http://magabot-control.googlecode.com/hg/static/pictures/plusMouseOver.png')" onMouseOut="changeImageSrc('updateOptionsButton', 'http://magabot-control.googlecode.com/hg/static/pictures/plus.png')">
				<img id="updateOptionsButton" onclick="updateOptionButtonClick()" onMouseOver="changeImageSrc('updateOptionsButton', 'http://magabot-control.googlecode.com/hg/static/pictures/plusMouseOver.png')" onMouseOut="changeImageSrc('updateOptionsButton', 'http://magabot-control.googlecode.com/hg/static/pictures/plus.png')" src="http://magabot-control.googlecode.com/hg/static/pictures/plus.png" /></a>
				<a href="http://magabot.cc/hangouts/" title="Go to application page" target="_blank" onMouseOver="changeImageSrc('infoButton', 'http://magabot-control.googlecode.com/hg/static/pictures/infoMouseOver.png')" onMouseOut="changeImageSrc('infoButton', 'http://magabot-control.googlecode.com/hg/static/pictures/info.png')" >
				<img id="infoButton"  onMouseOver="changeImageSrc('infoButton', 'http://magabot-control.googlecode.com/hg/static/pictures/infoMouseOver.png')" onMouseOut="changeImageSrc('infoButton', 'http://magabot-control.googlecode.com/hg/static/pictures/info.png')" src="http://magabot-control.googlecode.com/hg/static/pictures/info.png" /></a>
				<a href="#" title="Not working yet..." onMouseOver="changeImageSrc('settingsButton', 'http://magabot-control.googlecode.com/hg/static/pictures/settingsMouseOver.png')" onMouseOut="changeImageSrc('settingsButton', 'http://magabot-control.googlecode.com/hg/static/pictures/settings.png')">
				<img id="settingsButton"  onMouseOver="changeImageSrc('settingsButton', 'http://magabot-control.googlecode.com/hg/static/pictures/settingsMouseOver.png')" onMouseOut="changeImageSrc('settingsButton', 'http://magabot-control.googlecode.com/hg/static/pictures/settings.png')" src="http://magabot-control.googlecode.com/hg/static/pictures/settings.png" /></a>
			</div>
		</form>

		</body>
		</font></div>
</div>